<!DOCTYPE html>
<html class="iframe-h">

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>MY_PRO</title>
		<link rel="stylesheet" type="text/css" href="../../../static/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../../../static/admin/css/admin.css" />
	</head>

	<body>
		<div class="wrap-container clearfix">
				<div class="column-content-detail">
					<form class="layui-form" action="">
						<div class="layui-form-item">
							<div class="layui-inline tool-btn">
								<button class="layui-btn layui-btn-small layui-btn-normal addBtn" data-url="jumpAddOrUpdateRole"><i class="layui-icon">&#xe654;</i></button>
								<button class="layui-btn layui-btn-small layui-btn-warm listOrderBtn hidden-xs" data-url="article-add.html"><i class="iconfont">&#xe656;</i></button>
							</div>
							<div class="layui-inline">
								<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
							</div>

							<div class="layui-inline">
								<select name="states" lay-filter="status">
									<option value="">请选择一个状态</option>
									<option value="010">正常</option>
									<option value="021">停止</option>
									<option value="0571">删除</option>
								</select>
							</div>
							<button class="layui-btn layui-btn-normal" lay-submit="search">搜索</button>
						</div>
					</form>
					<div class="layui-form" id="table-list">
						<table class="layui-table" lay-even lay-skin="nob">
							<thead>
								<tr>
									<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
									<th class="hidden-xs">ID</th>
									<th>名称</th>
									<th class="hidden-xs">描述</th>
									<th>状态</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="table">

							</tbody>
						</table>
						<div id="page-wrap">

						</div>
					</div>
				</div>
		</div>
		<script th:src="@{static/admin/lib/jquery/jquery.min.js}"></script>
		<script th:src="@{static/admin/layui/layui.js}"></script>
		<script th:src="@{static/admin/js/core.js}"></script>
		<script th:src="@{static/admin/js/common.js}" type="text/javascript" charset="utf-8"></script>
	    <script>
			var currpage=1;
			var limit=20;
			var data;
			var ids = new Array();　//创建一个数组
			$(function () {
				getRoleList(currpage);
			})
			function getRoleList(currpage){
				$.post("/getRoleList",{current:currpage,limit:limit}, function (res) {
					var html="";
					layui.each(res.rows, function (index, row) {
						var status=row.status;
						var button='';
						if(status==1){
							button='<button class="layui-btn layui-btn-xs layui-btn-normal">正常</button>'
						}else{
							button='<button class="layui-btn  layui-btn-xs layui-btn-danger">禁用</button>'
						}
						//模拟渲染
						html+= '<tr> ' +
								'<td><input type="checkbox" name="" lay-skin="primary" data-id="1"></td> ' +
								'<td class="hidden-xs" >'+(index+1)+'</td> <td>'+row.name+'</td> ' +
								'<td>'+row.description+'</td> ' +
								'<td>'+button+'</td> ' +
								'<td> ' +
								'<div class="layui-inline"> ' +
								'<button class="layui-btn layui-btn-small layui-btn-normal edit-btn" data-url="jumpAddOrUpdateRole" data-id='+row.id+'><i class="layui-icon">&#xe642;</i></button>' +
								'<button class="layui-btn layui-btn-small layui-btn-warm " data-url="assignRole" onclick="btnAction(\''+row.id+'\')"><i class="layui-icon">&#xe654;</i>分配权限</button> ' +
								'<button class="layui-btn layui-btn-small layui-btn-danger del-btn" data-url="deleteRole" data-id='+row.id+'><i class="layui-icon">&#xe640;</i></button> ' +
								'</div> ' +
								'</td> ' +
								'</tr>';
					})
					$("#table").html(html)

					layui.use(['laypage', 'layer'], function () {
						var laypage = layui.laypage
						laypage.render({
							elem: 'page-wrap',
							count: res.total,
							limit: limit,
							curr:currpage,
							jump: function (obj,first) {
								if (!first) {
									currpage=obj.curr
									getRoleList(currpage)
								}
							}
						});
					});
				});

			}

			function btnAction(roleId) {
				openindex = layer.open({
					type: 1,
					title: '分配权限',
					area: ['400px', '950px'], //宽高
					content: '<div id="treedata" class="demo-tree-more"></div>' +
							' <span style="width: 150px;height: 45px;float: right">' +
							'<button  class="layui-btn layui-btn-primary" onclick="closelayer()">取消</button>' +
							'<button  class="layui-btn layui-btn-normal"  lay-demo="getChecked">确定</button>' +
							'</span> '
				});
				$.post("/getAssignPermissionList", {current: currpage, limit: limit,roleId:roleId}, function (res) {
					data = res;
					layui.use(['tree','util'], function () {
						var tree= layui.tree;
						var util= layui.util;
						tree.render({
							elem: '#treedata',
							data: data,
							showCheckbox: true,
							id: 'demoId1',
							isJump: true ,
						});
						util.event('lay-demo', {
							getChecked: function (othis) {
								var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
								/*let data = JSON.stringify(checkedData);*/
								console.log(checkedData);
								ids.splice(0,ids.length);//清空数组
								if(checkedData.length>0){
									layui.each(checkedData, function (i, p) {
										ids.push(p.id);
										if(p.children.length>0){
											layui.each(p.children, function (x, c) {
												ids.push(c.id);
											});
										}
									})
								}

								save(roleId);
							}
						});

					})
				})
			}


			//取消操作
			function closelayer() {
				layer.close(openindex);
			}
			//确认操作---给用户分配角色
			function save(roleId){
				if(ids.length<=0){
					layer.msg("至少选择一个角色", {
						offset: '30%',
						time: 800
					})
				}else{
					$.post("/assignPermission",{roleId:roleId,permissionIds:ids.toString()}, function (res) {
						if (res.status == 200) {
							layer.msg(res.msg, {
								offset: '30%',
								time: 800
							}, function () {
								//调用父页面的刷新
								window.refresh();
							});
						}else{
							layer.msg(res.msg, {
								icon: 2,
								offset: '30%',
								time: 2000
							});
						}
					})
				}
			}

		</script>
	</body>

</html>